<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	var i=0;
	i++;
	if(i===5){
		i=0;
	}  
	i%=5;
window.onload=function(){
	var aLi=document.getElementsByTagName('li');

	var arr=['red','yellow','blue'];
 
    var str='';

	for(var i=0;i<aLi.length;i++){

		aLi[i].inder=i;  //索引值

		aLi[i].style.background=arr[i%arr.length];

		aLi[i].onmouseover=function(){
			this.style.background='gray';
			str=this.style.background;  //先存颜色
		};
		aLi[i].onmouseover=function(){
			this.style.background=this.inder%arr.length;
			this.style.background=str;
		};
	}
};








	</script>
	<style>
li{height: 24px;margin-bottom: 3px;list-style: none;}
	</style>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>	
</body>
</html>